<template>
	<div id="container">
		<div id="title">
			<i class="el-icon-d-arrow-left backIcon" @click="goBack"></i>
			<span>非遗小贴士</span>
		</div>
		<el-divider></el-divider>
		<div id="allTips">
			<div v-for="(item,index) in tips" :key="index" class="tipCard" @click="showTip(index)">
				<div class="tip">
					<span class="number">{{index+1 | numberFormat() }} </span>
					{{item.title}} ？
				</div>
			</div>
		</div>
		<el-dialog title="" :visible.sync="dialogIsShow" width="50%">
			<div class="tip" style="font-size: 20px;font-weight: bold;">{{tipMessage.title}}？</div>
			<hr />
			<div class="content" style=" white-space: pre-wrap;">{{tipMessage.data | tipContentFormat() }}</div>
		</el-dialog>
	</div>

</template>

<script>
	import Tipsdata from './Tipsdata.js'
	export default {
		filters: {
			numberFormat(num) {
				let res = "0";
				if (num + 1 < 10) {
					return res + num + ". ";
				} else {
					return num + ". ";
				}
			},
			tipContentFormat(data) {
				let res = "";
				data.forEach((item) => {
					res += "     " + item + "\n";
				})
				return res;
			}
		},
		data() {
			return {
				tips: [],
				dialogIsShow: false,
				tipMessage: {
					title: "",
					data: []
				}
			}
		},
		created() {
			this.tips = Tipsdata.mydata
		},
		methods: {
			showTip(index) {
				this.dialogIsShow = true;
				this.tipMessage = this.tips[index];
			},
			goBack() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="less" scoped>
	#container {

		#title {
			margin: auto;
			font-size: 20px;
			color: white;
			width: 100%;
			font-weight: bold;
			display: flex;
			// justify-content: center;
			align-items: center;

			span {
				align-self: center;
				padding-left: 50%-7px;
			}

			.backIcon {
				margin-left: 15px;
				font-size: 25px;
				cursor: pointer;
				color: skyblue;
			}
		}

		#allTips {
			width: 100%;
			margin: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;


			.tipCard {
				margin: 10px;
				padding: 10px;
				width: 240px;
				height: 110px;
				border: 1px solid rgba(255, 255, 255, 0.3);
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0.2);
				cursor: pointer;
				transition: ease all 0.5s;

				.tip {
					color: rgba(255, 255, 255, 0.8);

					.number {
						font-size: 20px;
						color: white;
						font-weight: bold;
					}
				}

			}

			.tipCard:hover {
				box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 3px;
				transition: ease all 0.5s;
			}
		}
	}
</style>
